<template>
    <div>
        <img ref="img_bronze" :src="this.icon.img_bronze" style="display: none">
        <img ref="img_silver" :src="this.icon.img_silver" style="display: none">
        <img ref="img_gold" :src="this.icon.img_gold" style="display: none">
        <img ref="img_platinum" :src="this.icon.img_platinum" style="display: none">
        <img ref="img_ps" :src="this.icon.img_ps" style="display: none">
        <canvas ref="trophyCanvas" width="50" height="50" class="canvas-pre">您的浏览器不支持此功能</canvas>
    </div>
</template>

<script>
    export default {
        components: {},
        props: {
            name: {
                type: String,
                required: true
            },
            trophyType: {
                type: String,
                required: true
            },
            trophyIcon: {
                type: String,
                default: () => ''
            },
            trophyImage: {
                type: String,
                default: () => ''
            }
        },
        data() {
            return {
                icon: {
                    img_bronze: require('../assets/res_trophy/assets_images_trophy_bronze.png'),
                    img_silver: require('../assets/res_trophy/assets_images_trophy_silver.png'),
                    img_gold: require('../assets/res_trophy/assets_images_trophy_gold.png'),
                    img_platinum: require('../assets/res_trophy/assets_images_trophy_platinum.png'),
                    img_ps: require('../assets/res_trophy/ps_logo.png')
                },
                imageUrl: '',
                canvasData: {
                    top: 135, // Toast距离顶部的高度
                    toastHeight: 100, // Toast高度
                    toastWidth: 0, // Toast 宽度
                    iconSize: 65, // 奖杯图标大小
                    trophySize: 30, // 奖杯大小
                    logoSize: 42, // PS logo大小
                    logoMarginLeft: 30, // logo左边距
                    logoMarginRight: 25, // logo右边距
                    nameTextWidth: 0, // 奖杯名称宽度
                    nameMarginLeft: 12, // 奖杯名称左边距
                    nameFontSize: 28, // 奖杯名文字大小
                    descText: '已获得奖杯！',
                    descTextWidth: 0, // 已获得奖杯文字的宽度
                    descTextMarginTop: 0, // 已获得奖杯文字的顶部边距,
                    descFontSize: 22, // 已获得奖杯文字大小
                    paddingLeft: 100, // Toast 左内边距
                    textPaddingLeft: 23 // 文字+奖杯区域左边距
                },
                imgImage: new Image(),
                imgIcon: new Image()
            }
        },
        computed: {},
        watch: {
            trophyImage() {
                this.imgImage.src = this.trophyImage
            },
            trophyIcon() {
                this.imgIcon.src = this.trophyIcon
            }
        },
        created() {
        },
        mounted() {
        },
        methods: {
            draw() {
                const canvas = this.$refs.trophyCanvas
                const ratio = 1080 / this.imgImage.height
                canvas.setAttribute('width', (this.imgImage.width * ratio).toString())
                canvas.setAttribute('height', '1080')
                const ctx = canvas.getContext("2d")
                this.drawImage(ctx)
                this.drawBackground(ctx)
                this.drawBorder(ctx)
                this.drawIcon(ctx)
                this.drawTrophy(ctx)
                this.drawName(ctx)
                this.drawDesc(ctx)
                this.drawPsLogo(ctx)
            },
            drawImage(ctx) {
                const canvas = this.$refs.trophyCanvas
                ctx.drawImage(this.imgImage, 0, 0, canvas.width, canvas.height)
            },
            // 绘制黑色背景
            drawBackground(ctx) {
                // 计算背景宽度
                const canvasData = this.canvasData
                ctx.font = `${canvasData.nameFontSize}px 微软雅黑 Light`
                canvasData.nameTextWidth = ctx.measureText(this.name).width
                ctx.font = `${canvasData.descFontSize}px 微软雅黑 Light`
                canvasData.descTextWidth = ctx.measureText(canvasData.descText).width
                const nameWidth = canvasData.trophySize + canvasData.nameMarginLeft + canvasData.nameTextWidth
                const textWidth = nameWidth > canvasData.descTextWidth ? nameWidth : canvasData.descTextWidth
                canvasData.toastWidth = this.canvasData.paddingLeft
                    + canvasData.iconSize
                    + canvasData.textPaddingLeft
                    + textWidth
                    + canvasData.logoMarginLeft
                    + canvasData.logoMarginRight
                    + canvasData.logoSize
                // 设置渐变背景
                const grad = ctx.createLinearGradient(0, 0, canvasData.toastWidth, 0)
                grad.addColorStop(0, 'rgba(0,0,0,0.69)')
                grad.addColorStop(0.15, '#000')
                grad.addColorStop(1, '#000')
                ctx.fillStyle = grad
                // 绘制背景
                ctx.fillRect(0, canvasData.top, canvasData.toastWidth, canvasData.toastHeight)
            },
            // 绘制边框
            drawBorder(ctx) {
                const canvasData = this.canvasData
                const borderMargin = 3
                const grad = ctx.createLinearGradient(0, 0, canvasData.toastWidth - borderMargin, 0)
                grad.addColorStop(0, 'rgba(76,76,76,0.69)')
                grad.addColorStop(0.15, '#4c4c4c')
                grad.addColorStop(1, '#4c4c4c')
                ctx.strokeStyle = grad
                ctx.lineWidth = 2
                ctx.beginPath()
                // 边框的顶部y轴
                const topY = canvasData.top + borderMargin
                const endX = canvasData.toastWidth - borderMargin
                ctx.moveTo(0, topY)
                ctx.lineTo(endX, topY)
                ctx.stroke()
                const bottomY = canvasData.top + canvasData.toastHeight - borderMargin
                ctx.moveTo(0, bottomY)
                ctx.lineTo(endX, bottomY)
                ctx.stroke()
                ctx.strokeStyle = '#4c4c4c'
                ctx.moveTo(endX, topY - 1)
                ctx.lineTo(endX, bottomY + 1)
                ctx.stroke()
            },
            // 绘制大Icon
            drawIcon(ctx) {
                // 当未选择Icon时，以奖杯作为Icon
                let icon = undefined
                if (this.trophyIcon === '') {
                    icon = this.$refs[`img_${this.trophyType}`]
                } else {
                    icon = this.imgIcon
                }
                const canvasData = this.canvasData
                ctx.drawImage(
                    icon,
                    canvasData.paddingLeft,
                    canvasData.top + (canvasData.toastHeight - canvasData.iconSize) / 2,
                    canvasData.iconSize, canvasData.iconSize
                )
            },
            // 绘制奖杯
            drawTrophy(ctx) {
                const canvasData = this.canvasData
                ctx.drawImage(
                    this.$refs[`img_${this.trophyType}`],
                    canvasData.paddingLeft + canvasData.iconSize + canvasData.textPaddingLeft,
                    canvasData.top + (canvasData.toastHeight - canvasData.iconSize) / 2,
                    canvasData.trophySize,
                    canvasData.trophySize
                )
            },
            // 绘制奖杯名称
            drawName(ctx) {
                const canvasData = this.canvasData
                ctx.font = `${canvasData.nameFontSize}px 微软雅黑 Light`
                ctx.fillStyle = '#e1e1e1'
                ctx.textBaseline = "hanging"
                const x = canvasData.paddingLeft
                    + canvasData.iconSize
                    + canvasData.textPaddingLeft
                    + canvasData.trophySize
                    + canvasData.nameMarginLeft
                const y = canvasData.top + (canvasData.toastHeight - canvasData.iconSize) / 2 + 3
                ctx.fillText(this.name, x, y)
            },
            // 绘制已获得奖杯
            drawDesc(ctx) {
                const canvasData = this.canvasData
                ctx.font = `${canvasData.descFontSize}px 微软雅黑 Regular`
                ctx.fillStyle = '#9a9a9a'
                ctx.textBaseline = "alphabetic"
                const x = canvasData.paddingLeft
                    + canvasData.iconSize
                    + canvasData.textPaddingLeft
                const y = canvasData.top
                    + canvasData.toastHeight
                    - (canvasData.toastHeight - canvasData.iconSize) / 2
                    - 4
                ctx.fillText('已获得奖杯！', x, y)
            },
            // 绘制PS logo
            drawPsLogo(ctx) {
                const canvasData = this.canvasData
                const x = canvasData.toastWidth - canvasData.logoMarginRight - canvasData.logoSize
                const y = canvasData.top + (canvasData.toastHeight - canvasData.logoSize) / 2
                ctx.drawImage(this.$refs.img_ps, x, y, canvasData.logoSize, canvasData.logoSize)
            },
            download() {
                this.draw()
                const canvas = this.$refs.trophyCanvas
                canvas.toBlob(blob => {
                    const oa = document.createElement('a')
                    oa.download = 'screen.jpg'
                    oa.href = URL.createObjectURL(blob)
                    oa.click()
                }, 'image/jpeg', 1)
            }
        }
    }
</script>

<style scoped lang="less">
.canvas-pre {
    margin-top: 20px;
    width: 100%;
}
</style>
